<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack"> 
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>我的评论</p>
		</div>
		<div class="post-content">
			<ul class="post-list" v-if="isPostaxsd">
				<li v-for="(item,index) in list">
					<div class="list-top">
						<p> 
							<img src="../../../assets/images/mine/time.png"/>
							<span>{{item.time}}</span>
						</p>
						<img src="../../../assets/images/mine/delete.png" @click="handleDelete(item.comment_id,index)"/>
					</div>
					<p class="ask"><span>评论：</span>{{item.comment_desc}}</p>
					<div class="con"  @click="handleDetal(item.article.article_id)">
						<img :src="item.article_img[0]" v-if="item.article_img !=''"/>
						<div class="con-desc"><span v-if="item.article_img ==''">主题：</span>{{item.article.article_title}}</div>
					</div>
				</li>
			</ul>
			<div class="list-img-pic" v-else>
				<nocontent></nocontent>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	import user from '../../../utils/isLogin';
	import Nocontent from '@/components/home/no-content';
	export default{
		data(){
			return{
				list:[],
				isClick:true,
				isPostaxsd:true
			}
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			let plusReady = ()=>{
				
			}
			if (window.plus) {
		      plusReady();
		    } else {
		      document.addEventListener("plusready", plusReady, false);
		    }  
			var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
			if(userId){
		    	axios.post(user.src+ '/index/my/my_comments' , {
					userid: userId,
				})
				.then((res)=> {
					if(res.data.status == 1051){
						this.isPostaxsd = false;
					}
					if(res.data.status == 200){
						this.list = res.data.data;
						this.list.map((ele,index)=>{
							ele.time = ele.comment_time.slice(0,16);
						})
						this.isPostaxsd = true;
					}
				})
				.catch((error)=> {
				   
				});
		   }
		},
		components:{
			Nocontent
		},
		methods:{
			handleBack(){
				var post = plus.webview.currentWebview();
				plus.webview.close(post);
			},
			//进入帖子详情
			handleDetal (id){
				if(this.isClick){
					this.isClick = false;
					var postDetails = plus.webview.create('postDetails.html','postDetails',{scrollIndicator:'none'},{
						articleId:id,
						type:1
					});
					postDetails.addEventListener("loaded", ()=> {
					    postDetails.show('pop-in', 300);
					    this.isClick = true;
					    postDetails = null;
					}, false);
				}
			},
			//删除评论
			handleDelete(id,index){
//				this.list.splice(index, 1);
				axios.post(user.src+ '/index/my/delete_comment' , {
					commentid: id,
				})
				.then((res)=> {
					if(res.data.status == 200){
						this.list.splice(index, 1);
						plus.nativeUI.toast('删除成功')	
					}
					if(res.data.status == 1052){
						plus.nativeUI.toast('删除失败')
					}	
				})
				.catch((error)=> {
				   
				});
			}
		}
	}
</script>

<style lang='less' scoped>

html,body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;				
		.left-icon{
			width: 90px;
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{		
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span{
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.post-content{
		padding-top: 130px;
		width: 100%;		
		.post-list{
			padding: 0 21px 0 26px;			
			li{
				padding: 22px 0 40px 0;
				border-bottom: 1px solid #eeeeee;				
				.list-top{
					overflow: hidden;
					padding-bottom: 12px;					
					p{
						float: left;
						display: flex;						
						img{
							margin: 0 9px 0 3px;
							display: block;
							width: 28px;
							height: 28px;
						}
						span{
							font-size: 22px;
							color: #333;
						}
					}					
					img{
						float: right;
						width: 25px;
						height: 25px;
					}					
				}
				.ask{
					padding-left: 22px;
					height: 76px;
					line-height: 76px;
					font-size: 30px;
					color: #000;
					font-weight: 300;
				}
				.con{
					margin-left: 24px;
					overflow: hidden;
					background: #eeeef0;
					border-radius: 10px;
					display: flex;
					align-items: center;
						img{
							display: block;
							float: left;
							width: 174px;
							height: 140px;
						}
					.con-desc{					
						float: left;
						padding: 18px 0 20px 14px;
						font-size: 22px;
						color: #333;	
					}
				}
			}			
			li:last-child{
				border-bottom: none ;
			}
		}
	}
	.list-img-pic{
		height: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>